<template>
  <transition
    appear
    enter-active-class="animated slideInRight"
    leave-active-class="animated slideOutRight"
  >
    <div class="userEdit">
      <div class="user-top">
        <i class="iconfont iconfanhui" @click="routerback"></i>
        <h6>我的资料</h6>
      </div>
      <div class="user-scroll">
        <div class="user-edit-group">
          <div class="user-edit-item">
            <h6>头像</h6>

            <div class="right-box">
              <div class="currentAvatar" :style="{backgroundImage:'url('+avatar+')'}">
                <van-uploader
                  v-model="fileList"
                  :deletable="false"
                  :preview-full-image="false"
                  :preview-image="false"
                  image-fit="contain"
                  :after-read="afterRead"
                ></van-uploader>
              </div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
          <div class="user-edit-item" @click="showNickNamePick=true">
            <h6>昵称</h6>
            <div class="right-box">
              <div class="currentData">{{nickName}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
          <div class="user-edit-item" @click="showSex=true">
            <h6>性别</h6>
            <div class="right-box">
              <div class="currentData">{{genderTXT}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
          <div class="user-edit-item">
            <h6>二维码</h6>
            <div class="right-box">
              <i class="iconfont iconqrcode currentIcon"></i>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
        </div>
        <div class="user-edit-group">
          <div class="user-edit-item" @click="showDatePick=true">
            <h6>生日</h6>
            <div class="right-box">
              <div class="currentData">{{birthday | dateFormat}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
          <div class="user-edit-item" @click="showAreaPick=true">
            <h6>地区</h6>
            <div class="right-box">
              <div class="currentData">{{getarea}}</div>
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
        </div>
        <div class="user-edit-group">
          <div class="user-edit-item">
            <h6>介绍</h6>
          </div>
          <van-field
            v-model="signature"
            rows="4"
            autosize
            type="textarea"
            maxlength="300"
            placeholder="请输入个人签名"
            show-word-limit
          />
        </div>
        <div class="user-edit-group">
          <div class="user-edit-item">
            <h6>账号和绑定设定</h6>
            <div class="right-box">
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
          <div class="user-edit-item">
            <h6>个人主页展示设置</h6>
            <div class="right-box">
              <i class="iconfont iconarrnormal"></i>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="showSex" round position="bottom" :class="{'globalpop':setBotom}">
        <van-picker
          v-model="showSex"
          title="选择性别"
          show-toolbar
          :columns="columns"
          @confirm="handleSexConfirm"
          @cancel="showSex=false"
        />
      </van-popup>
      <van-popup v-model="showDatePick" round position="bottom" :class="{'globalpop':setBotom}">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showDatePick=false"
          @confirm="handleDateConfirm"
        />
      </van-popup>
      <van-popup v-model="showAreaPick" round position="bottom" :class="{'globalpop':setBotom}">
        <van-area
          title="标题"
          :area-list="areaList"
          :value="province"
          @cancel="showAreaPick=false"
          @confirm="handleAreaConfirm"
          @change="handleAreaChanged"
          columns-num="2"
        />
      </van-popup>
      <van-popup
        v-model="showNickNamePick"
        round
        position="bottom"
        :style="{ height: '22%' }"
        get-container="body"
      >
        <div class="showAddSheet-centent">
          <div class="title">
            <div class="cancel" @click="showNickNamePick=false">取消</div>
            <h4>修改昵称</h4>
            <div class="finish" :class="{'allow':nickName}" @click="globalChangeData">完成</div>
          </div>
          <input type="text" v-model="nickName" />
        </div>
      </van-popup>
    </div>
  </transition>
</template>

<script>
import {
  Picker,
  Toast,
  Popup,
  Field,
  DatetimePicker,
  Area,
  Uploader
} from "vant";
import province_list from "@/utils/area";
import { playListMixin } from "@/common/mixin.js";
import { updateUserInfo } from "@/request/api";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
import { mapGetters, mapActions } from "vuex";
export default {
  mixins: [playListMixin],
  data() {
    return {
      showSex: false,
      showDatePick: false,
      showAreaPick: false,
      showNickNamePick: false,
      areaList: province_list,
      columns: ["保密", "男", "女"],
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      setBotom: false,
      SexValue: "",
      // 暂时没有接口能修改头像:
      avatar: "",
      fileList: [],
      // 以下数据需要交换发送:
      birthday: "",
      signature: "",
      city: "",
      province: "",
      gender: "",
      nickName: "",
      result: {}
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    genderTXT() {
      switch (this.gender) {
        case 0:
          return "保密";
          break;
        case 1:
          return "男";
          break;
        case 2:
          return "女";
          break;
        default:
          return "不明生物";
      }
    },

    getarea() {
      return `${this.areaList.province_list[this.province]} ${
        this.areaList.city_list[this.city]
      } `;
    }
  },
  filters: {
    dateFormat(value) {
      if (typeof value === "number") {
        return moment.unix(value).format("YYYY-MM-DD");
      }
      return moment(value).format("YYYY-MM-DD");
    }
  },
  methods: {
    ...mapActions(["changeLoginInfo"]),
    afterRead(file) {
      // 目前暂无接口:
      // 实现上传图片的方式:
      // https://www.jianshu.com/p/598abba9efc6
      // https://blog.csdn.net/weixin_34221073/article/details/93176811
      let temp = this.fileList[this.fileList.length - 1].content;
      this.avatar = temp;
      Toast("目前暂无上传图片接口");
    },
    routerback() {
      this.$router.go(-1);
    },
    handleSexConfirm(value, index) {
      this.gender = this.genderNumber(value);
      this.showSex = false;
      this.globalChangeData();
    },
    genderNumber(val) {
      switch (val) {
        case "保密":
          return 0;
          break;
        case "男":
          return 1;
          break;
        case "女":
          return 2;
          break;
        default:
          return 0;
      }
    },
    handleDateConfirm(value) {
      console.log(typeof value);

      this.showDatePick = false;
      this.birthday = value;
      this.globalChangeData();
    },
    handleAreaConfirm(e) {
      this.province = e[0].code;
      this.city = e[1].code;
      this.showAreaPick = false;
      this.globalChangeData();
    },
    handlePlayList(playlist) {
      if (playlist.length > 0) {
        this.setBotom = true;
      } else {
        this.setBotom = false;
      }
    },
    handleAreaChanged(e) {
      console.log(e);
    },

    formatData() {
      console.log(moment(this.birthday).unix());

      this.result.birthday = moment(this.birthday).unix();
      this.result.signature = this.signature;
      this.result.city = parseInt(this.city);
      this.result.province = parseInt(this.province);
      this.result.gender = this.gender;
      this.result.nickname = this.nickName;
      console.log(this.result);
      return this.result;
    },
    globalChangeData() {
      // this.formatData();
      this.changeLoginInfo(this.formatData());
      // updateUserInfo(this.formatData()).then(res => {
      //   if (res.code === 200) {
      //     this.$toast("更新用户信息成功");
      //     this.showSex = false;
      //     this.showDatePick = false;
      //     this.showAreaPick = false;
      //     this.showNickNamePick = false;
      //   }
      //   console.log(res);
      // });
    }
  },
  watch: {
    userInfo: {
      // 首次加载就触发watch:
      immediate: true,
      handler: function(val, oldVal) {
        this.result = JSON.parse(JSON.stringify(val));
        this.signature = val.signature;
        this.birthday = val.birthday;
        this.city = val.city.toString();
        this.province = val.province.toString();
        (this.gender = val.gender), (this.nickName = val.nickname);
        this.avatar = val.avatarUrl;
      },
      deep: true
    }
  },
  components: {
    [Picker.name]: Picker,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    [Area.name]: Area,
    [Uploader.name]: Uploader
  }
};
</script>

<style lang="less" scoped>
.slideInRight {
  animation-duration: 0.6s;
}
.slideOutRight {
  animation-duration: 0.8s;
}
.user-top {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #333;
  h6 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
  }
}
.userEdit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  z-index: 666;
}
.iconfanhui {
  display: block;
  padding: 10px;
  font-size: 22px;
  color: #ffcd32;
  font-size: 24px;
  position: relative;
  left: 6px;
}
.iconarrnormal {
  font-size: 12px;
  margin-left: 8px;
  color: #999;
}
.user-edit-item {
  padding: 10px 0;
  padding-left: 16px;
  .flex-nowrap-sb(center);
  background-color: #333;
  position: relative;

  min-height: 45px;
  &::after {
    content: "";
    width: calc(~"100% - 16px");
    height: 1px;
    background-color: #222;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 6;
  }
  &:last-child {
    &::after {
      display: none;
    }
  }
  h6 {
    font-size: 15px;
  }
}
.globalpop {
  bottom: 60px;
}
.right-box {
  .flex-row-nowrap(center);
  padding-right: 18px;
  height: 100%;
}
.currentAvatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #222;
  .bz(contain);
}
.currentData {
  font-size: 14px;
  color: #999;
}
.currentIcon {
  font-size: 24px;
  color: #999;
}
.user-scroll {
}
.user-edit-group {
  margin-top: 6px;
}
/deep/.van-cell {
  background-color: #333;
  .van-field__control {
    color: #999;
  }
  .van-field__word-limit {
    color: #999;
  }
}

.van-popup {
  background-color: #333;
  color: #fff;
  input {
    padding: 8px 0;
    width: 100%;
    color: #fff;
    background-color: #343434;
    border: none;

    line-height: 1rem;
    font-size: 14px;
    &::-webkit-input-placeholder {
      color: #fff;
    }
    &::-moz-placeholder {
      color: #fff;
    }
    &::-ms-input-placeholder {
      color: #fff;
    }
  }
  /deep/.van-checkbox__label {
    color: #fff;
    font-size: 14px;
    opacity: 0.7;
  }
}
.van-action-sheet__description {
  .cf;
}
/deep/.van-cell-group {
  background-color: #333;
  .van-cell {
    background-color: #333;
    .cf;

    padding-left: 0;
  }
}

.showAddSheet-centent {
  padding: 0 16px;
  padding-bottom: 30px;
  width: 100%;
  .title {
    padding: 18px 0 15px;
    .flex-nowrap-sb(center);
    .cancel {
      font-size: 16px;
      opacity: 0.9;
    }
    h4 {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
    }
    .finish {
      font-size: 16px;
      color: #999;
      opacity: 0.75;

      &.allow {
        opacity: 1;
        color: #fff;
      }
    }
  }
}
/**----美化pick---- */
/deep/.van-picker__toolbar {
  background-color: #333;
}
/deep/.van-picker {
  background-color: #333;
}
/deep/.van-picker__mask {
  display: none;
}
/deep/.van-picker-column__item {
  color: #999;
}
/deep/.van-picker__confirm {
  color: #fff;
}
/deep/[class*="van-hairline"]::after {
  border: 1px solid #ebedf0;
}
/deep/.van-hairline--top-bottom::after,
/deep/.van-hairline-unset--top-bottom::after {
  border-width: 1px 0;
}

/**-----美化图片上传，覆盖住原图片---- */
.currentAvatar {
  position: relative;
  margin-right: 0;
}
/deep/.van-uploader {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
}
/deep/.van-uploader__wrapper {
  width: 100%;
  height: 100%;
}
/deep/.van-uploader__upload {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/**-----预览图片美化---- */
/deep/.van-uploader__preview {
  width: 100%;
  height: 100%;
  margin: 0;
}
/deep/.van-uploader__preview-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/deep/.van-uploader__preview-delete {
  // display: none;
}
</style>